<!--
En éste ejemplo se integrarán todos los casos vistos hasta ahora de seleción: 
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="script/jquery-1.11.0.min.js"></script>
        <script>
            $(document).on('ready', function(){
                
                //cambia de color las noticias pares
                $('#color-par').on('click', function(){
                    $('#noticias article.noticia-par').css({
                        'background-color': '#dddddd'
                    });
                });
                
                //Cambia de color las noticias impares
                $('#color-impar').on('click', function(){
                    $('#noticias article.noticia-impar').css({
                        'background-color': '#dddfff'
                    });
                });
                
                //cambia de color solo los articulso con id articulo01, articulo02 y articulo03
                $('#color-01-02-03').on('click', function(){
                    $('#articulo01, #articulo02, #articulo03').css({
                        'background-color': '#ddd000'
                    });
                });
                
                //Le cambia el texto a todos los elementos
                $('#texto-todos').on('click', function(){
                    $('#noticias article p').text('Loco, cambiaste el texto de todo');
                });
                
                //cambia el título de todos
                $('#titulo-todos').on('click', function(){
                    $('#noticias article h1').html('<strong><h2>todos a h2</h2></strong>');    
                });
                
                //Cambiamos el color de los artículos con id 03 y 04. también su encabezado
                $('#titulos-03-04').on('click', function(){
                    $('#articulo03, #articulo04').css({
                        'background-color': '#ddd000'
                    });
                    
                    $('#articulo03 h1, #articulo04 h1').html('<h2>Cambiaste a h2</h2>');
                });
            });
        </script>
        <style>
            .noticias{
                border: solid 1px black;
                width: 50%;
                text-align: center;
            }
            .noticia-par{
                background-color: #fffddd;
                border: dotted 1px gray;
                text-align: center;
            }
            .noticia-impar{
                background-color: #fffeee;
                border: dotted 1px gray;
                text-align: center;
            }
            table{
                width: 50%;
            }
            
        </style>
    </head>
    <body>
        <div id="noticias" class="noticias">
            <article id="articulo01" class="noticia-par">
                <h1>Articulo 01</h1>
                <p>Se comenta que éste es el artículo 01</p>
            </article>
            
            <article id="articulo02" class="noticia-impar">
                <h1>Articulo 02</h1>
                <p>Se comenta que éste es el artículo 02</p>
            </article>

            <article id="articulo03" class="noticia-par">
                <h1>Articulo 03</h1>
                <p>Se comenta que éste es el artículo 03</p>
            </article>
            
            <article id="articulo04" class="noticia-impar">
                <h1>Articulo 04</h1>
                <p>Se comenta que éste es el artículo 04</p>
            </article>            
        </div>
        
        <div id="controles">
            <table>
                <tr>
                    <td>
                        <button id="color-par">Cambiar Color Artículos Pares</button>
                    </td>
                    
                    <td>
                        <button id="color-impar">Cambiar Color Artículos Impares</button>
                    </td>
                    
                    <td>
                        <button id="color-01-02-03">Cambiar Color Artículos 1-2-3</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="texto-todos">Cambiar texto todos</button>
                    </td>
                    
                    <td>
                        <button id="titulo-todos">Cambiar título todos</button>
                    </td>
                    
                    <td>
                        <button id="titulos-03-04">Cambiar título 03 y 04</button>
                    </td>
                    
                </tr>
            </table>
        </div>
    </body>
</html>
